<template>
  <div>
    <el-form :model="currentRow" ref="form" label-width="150px" :inline="false" size="normal">
      <span v-for="item in formItemList" :key="item.filed">
        <div v-if="item.type === 'formItem'">
          <div class="form-item">
            {{ item.label }}
          </div>
        </div>
        <el-form-item v-else :label="item.label">
          <el-image
            v-if="item.type === 'img'"
            :src="baseUrl + currentRow[item.filed]"
            fit="fill"
            :lazy="true"
            style="width: 120px"
          />
          <a v-else-if="item.type === 'file'" :href="baseUrl + state.fileObj.url">
            {{ state.fileObj.name }}
          </a>

          <div v-else-if="item.type === 'text'" class="form-content">
            {{ dealFiledVal(item.filed) }}
          </div>
        </el-form-item>
      </span>
      <el-form-item>
        <el-button type="primary" @click="handleCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as ElectronicDeliveryApi from '@/api/pro/electronicdelivery'

defineOptions({ name: 'DeliveryDetails' })

const emit = defineEmits([''])

const baseUrl = import.meta.env.VITE_BASE_URL
const route = useRoute()
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => {}
  }
})

const formItemList = [
  {
    label: '文件信息',
    filed: '',
    type: 'formItem'
  },
  {
    label: '送达文号',
    filed: 'number',
    type: 'text'
  },
  {
    label: '文件类型',
    filed: 'fileType',
    type: 'text'
  },
  {
    label: '被送达人姓名',
    filed: 'acceptName',
    type: 'text'
  },
  {
    label: '被送达人身份证号',
    filed: 'acceptCard',
    type: 'text'
  },
  {
    label: '被送达人联系方式',
    filed: 'acceptPhone',
    type: 'text'
  },
  {
    label: '案件编号',
    filed: 'caseNumber',
    type: 'text'
  },
  {
    label: '案件名称',
    filed: 'caseName',
    type: 'text'
  },
  {
    label: '检察长签名',
    filed: 'proSignatureUrl',
    type: 'img'
  },
  {
    label: '相关附件',
    filed: 'file',
    type: 'file'
  },
  {
    label: '检察长备注',
    filed: 'proRemark',
    type: 'text'
  },
  {
    label: '被送达人备注',
    filed: 'acceptRemark',
    type: 'text'
  },
  {
    label: '签收状态',
    filed: 'status',
    type: 'text'
  },
  {
    label: '创建人信息',
    filed: '',
    type: 'formItem'
  },
  {
    label: '创建人',
    filed: 'creator',
    type: 'text'
  },
  {
    label: '创建日期',
    filed: 'createTime',
    type: 'text'
  }
]
const fileTypeObj = {
  1: '起诉书',
  2: '抗诉书',
  3: '补充侦查决定书',
  4: '证据清单',
  5: '传票',
  6: '量刑建议书',
  7: '申诉复查决定书',
  8: '检察建议书',
  9: '其他'
}
const state = reactive({
  fileObj: {}
})

onMounted(() => {
  getFile()
})

// 获取文件信息
function getFile() {
  const params = {
    businessId: props.currentRow.id,
    businessType: 'Dian'
  }
  ElectronicDeliveryApi.getFileistAPI(params).then((res) => {
    state.fileObj = res.list[0]
  })
}

function handleCancel() {
  emit('cancel')
}

function dealFiledVal(filed) {
  const row = props.currentRow
  if (filed === 'fileType') {
    return fileTypeObj[row[filed]]
  } else if (filed === 'status') {
    return row[filed] ? '已签收' : '待签收'
  } else if (filed === 'createTime') {
    return formatDate(new Date(row[filed]))
  } else {
    return row[filed]
  }
}
</script>

<style scoped lang="scss">
.form-item {
  border-left: 10px solid #2676fd;
  padding-left: 8px;
  font-weight: 600;
  margin-bottom: 24px;
}
.form-content {
  width: 20%;
}
</style>
